<template>
	<view class="titles">
		<view class="left">
			<view class="bgc_box"></view>
			{{titles}}
		</view>
		<view class="right">
			<uni-icons color="#bbb" size="20" :type="showAnimation ? 'arrowup' : 'arrowdown'" @click="onIcone"/>
		</view>
	</view>
</template>

<script>
	import uniIcons from '@/components/uni-icons/uni-icons.vue'
	export default{
		name: 'titles',
		props: {
			titles: {
				type: String,
				default: ''
			},
			showAnimation: {
				type: Boolean,
				default: true
			}
		},
		components: {
			uniIcons
		},
		data() {
			return {
				
			}
		},
		methods: {
			onIcone() {
				this.$emit('onIcone', this.showAnimation)
			}
		}
	}
</script>

<style>
.titles {
	display: flex;
	align-items: center;
	margin-top: 20rpx;
	width: 100%;
	height: 60rpx;

	background-color: #fff;
	justify-content: space-between;
	line-height: 60px;
	
	.left {
		height: 100%;
		display: flex;
		align-items: center;
		font-weight: 800;
		font-size: 32rpx;
		
		.bgc_box {
			width: 6rpx;
			height: 100%;
			margin-right: 12rpx;
			background-color: #0863e8;
		}
	}
	
	.right {
		
	}
	
}	
</style>